// 使用scss的时候，最后一个减少重复的主要特性就是选择器继承。
// 一个选择器可以继承另一个选择器定义的所有样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
// .seriousError将会继承样式表中任何位置出的.error定义的所有样式。以class = "seriousError" 修饰的html元素
// 最终展示效果就好像是 class = "seriousError error"
// .seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承

.error a {//应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { // 应用到h1.seriousError
  font-size: .075rem;
}

// 6-2 继承的高级用法

.disabled {// 样式修饰使它看起来像是一个灰掉的超链接。 通过继承a这一超链接元素来实现
  color: gray;
  @extend a; // a 的所有样式都会被继承
}
// 6-3 继承的工作细节
/*
跟变量和混合器不同，继承不是仅仅用css样式替换@extend 处的代码那么简单
原理: 如果.seriousError @extend .error, 那么样式表中任何一处.errot都用.error  .seriousError 这一组选择器进行替换。
这就意味着相关的样式会如预期的那样应用到.error和.seriousError
*/

/*
关于@extend有俩个要点
1. 跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小，页面加载会更快
2. 继承遵从css层叠的规则，当俩个不同的css规则应用到同一个html元素上时，并且这俩个不同的css规则对同一属性的修饰存在不同的值，
   css层叠规则会决定应用哪个样式。相当直观: 通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。
*/